<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')">通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')">通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')">通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		
		<div id="div">
			<fieldset>
				<legend>原始图片</legend>
				<img id="fruit" src="img/fruit.jpg">
			</fieldset>
			
			<fieldset>
				<legend>图片路径</legend>
				<p id="msg1">在这里显示</p>
			</fieldset>
			
			<fieldset>
				<legend>选择你喜欢的水果</legend>
				<ul style="text-align: left;">
					<li>
						<input name="enjoy" type="checkbox" value="苹果" />苹果
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="葡萄" />葡萄
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="西瓜" />西瓜
					</li>
				</ul>
				<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
			</fieldset>
			
			<fieldset>
				<legend>创建图片</legend>
				<div id="msg3"></div>
			</fieldset>
			
			<fieldset>
				<legend>克隆图片</legend>
				<div id="msg4"></div>
			</fieldset>
		</div>
		
		<script>
			//179000629徐阳光
			//菜单收缩与扩展
			function show(title) {
				let currentMenu = document.getElementById(title);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}
			//获取原始图片路径
			function showImg() {
				let img1 = document.querySelector("#fruit");
				let msg1 = document.querySelector("#msg1");
				msg1.innerHTML = img1.getAttribute("src");
			}
			//获取喜欢的水果
			function getFruit() {
				let msg2 = document.getElementById("msg2");//找到标签 随后放入值
				like = document.getElementsByName("enjoy");//找到标签获取被选中的值
				check_value = [];
				for(i in like){
					if(like[i].checked){
						check_value.push(like[i].value);
					}
				}
				// console.log("我喜欢的水果："+check_value);
				msg2.innerHTML = "我喜欢的水果："+check_value;
			}
			//创建图片
			function createImg() {
				document.getElementById("msg3").innerHTML = "<img src='img/fruit.jpg' />"
			}
			//克隆图片
			function cloneImg() {
				let msg4 = document.getElementById("msg4");//找到标签
				let img2 = fruit.cloneNode(true);//完全复制
				msg4.appendChild(img2);
			}
			//改变原始图片
			function changeImg() {
				let img1 = document.querySelector("#fruit");
				img1.setAttribute("src","img/grape.jpg");
			}
			//删除原始图片
			function removeImg() {
				let img1 = document.querySelector("#fruit");
				img1.remove("src");
			}
			//操作样式1
			function changeCss1(){
				//原始图片增加边框
				let img1 = document.querySelectorAll("img")[11];
				console.log(img1);
				img1.style.border = "red 5px";
			}
			//操作样式2
			function changeCss2(){
				//fieldset增加背景
				// let f = document.querySelectorAll("fieldset");//找到所有的标签
				// console.log(f);
				// f.style.backgroundColor = "red";
				
				// let f = document.querySelectorAll("fieldset");//找到所有的标签
				// f.style.backgroundColor = "red";
				
				let div = document.getElementById("div");//获取标签
				let nodes = div.childNodes;//获取所有标签
				console.log(nodes);
				for(var i = 0; i<nodes.length;i++){
					if(nodes[i].nodeType == 1 && nodes[i].nodeName == "fieldset"){
						nodes[i].className = "newcss1";
					}
				}
				
			}
		</script>
	</body>
</html>
